<template>
  <div id="waveship">
    <v-tableTitle
                  :title="$t('wave.waveship')"></v-tableTitle>
    <div class="detail">
      <v-navMenu
        :detailNav="detailNav"
        :menuData="menuData"
        @setMentActive="setMentActive"
      ></v-navMenu>
      <component
        :inputData="{detailData,detailDataFpkw}"
        :is="currentComponent"
      ></component>
    </div>
  </div>
</template>

<script>
import navMenu from "commons/NavMenu";
import baseMixin from "@/mixins/BaseMixin";
import tableTitle from "commons/TableTitle";

export default {
  name: "inventory",
  mixins: [baseMixin],
  data () {
    return {

      selectData: {},
      detailData: {},
      detailDataFpkw: {},
      menuData: [
        { label: this.$t('wave.readyship'), index: "1" },
        { label: this.$t('wave.shipped'), index: "2" },
      ],
      detailNav: "1",
      componentConfig: [
        {
          name: "waveship_readyship",
          label: this.$t('wave.readyship'),
          component: () => import('./detail/waveship_readyship.vue')
        },
        {
          name: "waveship_shipped",
          label: this.$t('wave.shipped'),
          component: () => import('./detail/waveship_shipped.vue')
        }
      ],
      deleteStatus: true
    }
  },
  computed: {
    currentComponent () {
      return this.componentConfig[this.detailNav - 1].component;
    }
  },
  methods: {

    setMentActive (key) {
      this.detailNav = key;
    },

  },
  mounted () {
    if (Object.keys(this.$store.state.skip).length !== 0) {
      let data = this.$store.state.skip;
      this.detailData = data.detail;
      this.selectData = data.routeData;
      this.detailNav = data.detailNav;
    } else {
      this.selectData = this.$store.state.routeData;
    }

  },
  watch: {

  },
  components: {
    "v-navMenu": navMenu,
    "v-tableTitle": tableTitle,
  },
}
</script>

<style scoped>
#inventory {
  width: 100%;
  height: 99%;
  padding-top: 6px;
}
</style>
